<template>
  <div v-if="showPopup" class="popup-box">
    <div class="popup-content">
      <div class="flex items-center justify-between p-x-30 p-y-16 title">
        <div class="font-size-22 color-1 font-weight-700">绑定会员</div>
        <div
          @click="showPopup = false"
          class="iconfont icon-guanbi font-size-22"
        ></div>
      </div>

      <div class="content">
        <div class="left text-center">
          <WSearchInput
            v-model="memberValue"
            saomaType="memberValue"
            placeholder="请输入手机号/会员码"
          >
            <template #input-icon>
              <div class="iconfont icon-a-saoma_scan-code3"></div>
            </template>
          </WSearchInput>

          <image
            mode="widthFix"
            style="width: 201rpx"
            :src="saoyisao_tip_icon"
          />

          <div class="color-1 font-size-18 font-weight-700">扫码绑定会员</div>
          <div class="m-t-6">请让顾客出示「会员二维码」</div>
        </div>
        <div class="right">
          <div>
            <NumKeyboard
              ratio="106/66"
              class="gap-8"
              @confirm="numKeyboardConfirm"
              v-model="memberValue"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, watch } from "vue";
import { useCommonStore } from "../../store/common";
const commonStore = useCommonStore();
import saoyisao_tip_icon from "../../static/images/saoyisao_tip_icon.png";

const showPopup = ref(false);
const memberValue = ref("");
const ovlSaomaType = ref("");

watch(showPopup, (newVal) => {
  if (newVal) {
    ovlSaomaType.value = commonStore.saomaType;
    commonStore.setSaomaType("memberValue");
  } else {
    commonStore.setSaomaType(ovlSaomaType.value);
  }
});
function open() {
  showPopup.value = true;
}
function numKeyboardConfirm() {
  console.log("confirm");
}

// 扫码枪逻辑
uni.$on("sendCode", sendCode);
function sendCode(e) {
  // 不是当前输入框的扫码
  if (commonStore.saomaType !== "memberValue") return;
  memberValue.value = e;
  // 搜索商品，添加购物车，如果没有提示商品不存在
  setTimeout(() => {
    memberValue.value = "";
  }, 5000);
}
defineExpose({
  open,
});
</script>
<style lang="scss" scoped>
.popup-box {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba($color: #000000, $alpha: 0.3);
  // backdrop-filter: blur(20px);
  .popup-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 754rpx;
    min-height: 450rpx;
    border-radius: 20rpx;
    background: #fff;
    // padding: 30rpx 40rpx;

    .title {
      border-bottom: 1px solid $uni-border-color-1;
    }

    .content {
      padding: 40rpx 35rpx 0 30rpx;
      display: flex;
      gap: 30rpx;
      .left {
        width: 325rpx;
      }
      .right {
        flex: 1;
      }
    }
  }
}
</style>
